<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<link href="<c:url value="/resources/bootstrap/2.3.2/css/bootstrap.css" />" rel="stylesheet">
<link href="<c:url value="/resources/bootstrap/2.3.2/css/bootstrap-responsive.css" />" rel="stylesheet">

<title>欢迎来到家在曼城</title>
<style>
 	input[type='text'],input[type='password']{
		height: auto;
    }

</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<h2>家在曼城【会员注册】</h2>
			<hr>
			
			<div>
				<form class="form-horizontal" id="myform">
					<div class="control-group">
						<label class="control-label" for="email">邮箱</label>
						<div class="controls">
							<input type="text" id="email" name="email" placeholder="" check-type="required" required-message="请输入电话号码">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="password">密码</label>
						<div class="controls">
							<input type="password" name="password" id="password" placeholder="" check-type="required" required-message="请输入电话号码">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="username">昵称</label>
						<div class="controls">
							<input type="text" id="username" name="username" placeholder="" check-type="required" required-message="请输入电话号码">
						</div>
					</div>
					
					<div class="control-group">
						<label class="control-label" for="username">验证码</label>
						<div class="controls">
							<img class='validate-img' width="90px" height="36px" onclick="refreshCode()"/>
							<small>看不清楚？<a href="javascript:refreshCode()">换一个</a></small>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="validateCode"></label>
						<div class="controls">
							<input type="text" id="validateCode" name="validateCode" placeholder="" check-type="required" required-message="请输入电话号码">
						</div>
					</div>
					<div class="control-group">
					
						<div class="controls">
							<button class="btn btn-large btn-success" id="registerBtn" type="button">注册</button>
						</div>
						
					</div>
					
					
				</form>
			</div>
		</div>
	</div>
	<!--/row-->
</body>

<script src="<c:url value="/resources/jquery/1.9.1/jquery.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/2.3.2/js/bootstrap.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap-validation.js" />"></script>
<script type="text/javascript">
	$(document).ready(function(){
		refreshCode();
		
		//$("#myform").validation();
		
		$("#registerBtn").click(function(){
			var mydata = '{"email":"' + $('#email').val() + '","password":"'  
            + $('#password').val() + '","username":"' + $('#username').val() 
            + '","validateCode":"'+$("#validateCode").val()+'","type":1}';  
			$.ajax({
				url:'<c:url value="/api/register" />',
				type:'post',
				dataType:'json',
				contentType : 'application/json',  
				data:mydata,
				success:function(data){
					if(typeof(data.code) == 'undefined'){
						//注册成功
						window.location.href = "checkEmail?email="+$('#email').val();
					}else{
						console.log(data);
					}
				}
			})
		})
	})
	/**
	* 刷新验证码
	*/
	function refreshCode(){
		//加入随机数作为参数，主要是解决有些浏览器不刷新的问题
		$(".validate-img").attr('src','<c:url value="/api/validatecode?q='+Math.random()+'"/>');
		
	}
</script>